<template>
  <div>
    <!-- 顶部 -->
    <div class="userbox">
      <div class="user_top">
        <div class="user_left">
          <router-link
            to="/boy"
            tag="span"
            class="iconfont icon-xiaoyuhao"
          ></router-link
          ><span @click="$router.go(-1)">个人中心</span>
        </div>
        <div class="user_right">
          <router-link tag="span" to="/search" class="iconfont icon-sousuo"></router-link>
          <router-link tag="span" to="/bookshif" class="iconfont icon-shuji"></router-link>
        </div>
      </div>
      <div class="user_center">
        <div class="img">
          <img
            src="https://qidian.gtimg.com/qd/images/ico/default_user.0.2.png"
            alt=""
          />
        </div>
        <p>书友20190903003714416</p>
        <i></i>
      </div>
    </div>

    <!-- 月票 -->
    <div class="monthly_ticket">
      <ul>
        <router-link tag="li" to="/monthly">
          <p>15</p>
          <p>月票</p>
        </router-link>
        <router-link tag="li" to="/recommend">
          <p>46</p>
          <p>推荐票</p>
        </router-link>
        <router-link tag="li" to="/currency">
          <p>{{coin}}</p>
          <p>起点币</p>
        </router-link>
        <router-link tag="li" to="/recharge">
          <i></i>
          <p class="con">去充值<span class="iconfont icon-dayuhao"></span></p>
        </router-link>
      </ul>
    </div>

    <!-- 颜色过渡 -->
    <div class="user_bg"></div>

    <!-- 消息中心 -->
    <div class="user_lists">
      <router-link tag="div" to="/info" class="user_item">
        <div class="left">
          <i></i>
          <span>消息中心</span>
        </div>
        <span class="iconfont icon-dayuhao"></span>
      </router-link>
      <router-link tag="div" to="/member" class="user_item">
        <div class="left">
          <i></i>
          <span>会员中心</span>
        </div>
        <div class="right">
          <em></em>
          <span class="iconfont icon-dayuhao"></span>
        </div>
      </router-link>
      <router-link tag="div" to="/grade" class="user_item">
        <div class="left">
          <i></i>
          <span>经验等级</span>
        </div>
        <div class="right">
          <em>1级</em>
          <span class="iconfont icon-dayuhao"></span>
        </div>
      </router-link>
      <router-link tag="div" to="/security" class="user_item">
        <div class="left">
          <i></i>
          <span>安全中心</span>
        </div>
        <div class="right">
          <span class="iconfont icon-dayuhao"></span>
        </div>
      </router-link>
      <router-link tag="div" to="/help" class="user_item">
        <div class="left">
          <i></i>
          <span>帮助中心</span>
        </div>
        <div class="right">
          <span class="iconfont icon-dayuhao"></span>
        </div>
      </router-link>
    </div>

    <!-- 颜色过渡 -->
    <div class="user_bg"></div>

    <!-- 退出登录 -->
    <div class="end" @click="endlogin">退出登录</div>

    <!-- 颜色过渡 -->
    <div class="user_bg"></div>

    <!-- 底部 -->
    <div class="footer-link">
      <div class="top">
        <p>QQ阅读</p>
        <p>红袖添香</p>
      </div>
      <div class="among">
        <p>客户端</p>
        <p>触屏版</p>
        <p>帮助与客服</p>
        <p>搜索</p>
      </div>
      <div class="footer-copy">
        <p>网站备案/许可证号：沪B2-20080046-1</p>
        <p>互联网宗教信息服务许可证 编号：沪（2022）0000022</p>
        <p>沪B2-20080046-1</p>
      </div>
    </div>
    <div class="content">
      <div class="img">
        <img src="../assets/img/fixed.png" alt="" />
        <div class="text">
          <p>安装起点读书客户端</p>
          <p>看更多正版好书</p>
        </div>
      </div>
      <div class="download">下载</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      coin: null,
    };
  },
  methods: {
    endlogin() {
      window.localStorage.removeItem("token");
      this.$toast("退出登录");
      this.$router.push("/login");
    },
  },
  created(){
    if (!window.localStorage.coin) {
      window.localStorage.setItem("coin", 0); 
    }
    this.coin = parseInt(window.localStorage.coin)
  }
};
</script>

<style lang="scss" scoped>
// 顶部
.userbox {
  background: #ed424b
    url("https://qidian.gtimg.com/qdm/img/center-header-bg.c36bb.jpg") no-repeat
    center;
  background-size: cover;
  padding-bottom: 20px;
  .user_top {
    display: flex;
    padding: 10px;
    justify-content: space-between;
    align-items: center;
    color: #fff;
    .user_left {
      font-size: 14px;
      font-weight: 400;
      display: flex;
      align-items: center;
      .iconfont {
        margin-right: 10px;
      }
    }
    .user_right {
      display: flex;
      align-items: center;
      .iconfont {
        font-size: 20px;
        &:nth-child(2) {
          margin-left: 10px;
        }
      }
    }
  }
  .user_center {
    text-align: center;
    .img {
      margin: 0 auto;
      width: 58px;
      height: 58px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    p {
      font-size: 13px;
      color: #fff;
      padding: 8px 0;
    }
    i {
      display: block;
      width: 33px;
      height: 15px;
      background: url("https://qidian.gtimg.com/qdm/icon/level/sprite@2x.94f57.png")
        0px -19px;
      background-size: 92px 72px;
      margin: 0 auto;
    }
  }
}

// 月票
.monthly_ticket {
  ul {
    display: flex;
    padding: 10px 0;
    li {
      width: 25%;
      display: flex;
      flex-direction: column;
      align-items: center;
      i {
        margin-top: 2px;
        display: block;
        background: url("https://qidian.gtimg.com/qdm/icon/center/sprite@2x.8723f.png");
        background-position: -34px -28px;
        width: 24px;
        height: 18px;
        background-size: 106px 73px;
      }
      p {
        &:nth-child(1) {
          font-size: 18px;
        }
        &:nth-child(2) {
          color: #969ba3;
          font-size: 12px;
          margin-top: 2px;
          margin-top: 5px;
          span {
            font-size: 12px;
          }
        }
        &.con {
          color: #ed424b;
        }
      }
    }
  }
}

// 颜色过渡
.user_bg {
  background-color: #f6f7f9;
  width: 100%;
  height: 10px;
}

// 消息中心
.user_lists {
  .user_item {
    padding: 15px;
    display: flex;
    padding-left: 0;
    margin-left: 15px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #cccccc;
    .left {
      display: flex;
      i {
        display: inline-block;
        background-image: url("https://qidian.gtimg.com/qdm/icon/center/sprite@2x.8723f.png");
        background-position: -90px 0;
        width: 16px;
        height: 18px;
        background-size: 106px 73px;
        margin-top: 2px;
      }
      span {
        font-size: 16px;
        font-weight: bold;
        text-indent: 12px;
      }
    }
    .right {
      display: flex;
      span {
        font-size: 16px;
        font-weight: bold;
        text-indent: 12px;
      }
    }
    &:nth-child(2) {
      .left {
        i {
          background-position: 0 -56px;
          width: 18px;
          height: 17px;
          background-size: 106px 73px;
        }
      }
      em {
        display: block;
        width: 33px;
        height: 15px;
        background: url("https://qidian.gtimg.com/qdm/icon/level/sprite@2x.94f57.png")
          0px -19px;
        background-size: 92px 72px;
      }
    }
    &:nth-child(3) {
      .left {
        i {
          background-position: -68px 0;
          width: 18px;
          height: 18px;
          background-size: 106px 73px;
        }
      }
    }
    &:nth-child(4) {
      .left {
        i {
          background-position: -90px -22px;
          width: 16px;
          height: 18px;
          background-size: 106px 73px;
        }
      }
    }
    &:nth-child(5) {
      border-bottom: none;
      .left {
        i {
          background-position: -90px -44px;
          width: 16px;
          height: 16px;
          background-size: 106px 73px;
        }
      }
    }
  }
}

// 退出登录
.end {
  width: 100%;
  height: 44px;
  text-align: center;
  line-height: 44px;
  color: #ed424b;
}

/* 底部 */
.footer-link {
  background-color: #fff;
  padding-top: 22px;
  padding-bottom: 24px;
  .top {
    p {
      width: 50%;
      text-align: center;
      font-size: 14px;
      color: #969ba3;
    }
  }
  .among {
    margin-top: 34px;
    p {
      width: 25%;
      text-align: center;
      font-size: 14px;
      color: #969ba3;
    }
  }
  .footer-copy {
    text-align: center;
    font-size: 12px;
    color: #969ba3;
    margin-top: 20px;
  }
}
.footer-link .top,
.footer-link .among {
  display: flex;
}
.content {
  background-color: #f6f7f9;
  padding: 0 16px 17px 16px;
  display: flex;
  justify-content: space-between;
  .img {
    display: flex;
    margin-top: 12px;
    img {
      width: 36px;
      height: 36px;
    }
    .text {
      margin-left: 12px;
      p {
        &:nth-child(1) {
          font-size: 14px;
          color: #33373d;
        }
        &:nth-child(2) {
          font-size: 12px;
          color: #969ba3;
        }
      }
    }
  }
  .download {
    margin-top: 16px;
    font-size: 14px;
    padding: 7px 16px;
    background-color: #ed424b;
    color: #fff;
    border-radius: 18px;
  }
}
a {
  text-decoration: none;
  color: #000;
}
.bottom {
  position: fixed;
  bottom: 46px;
  left: 0px;
  right: 0;
  margin: auto;
  display: flex;
  background-color: #ed424b;
  padding: 5px 8px;
  border-radius: 12px;
  width: 251px;
  .img {
    img {
      width: 18px;
      height: 18px;
      margin-top: 3px;
    }
  }
  .text {
    color: #fff;
    text-indent: 0.5rem;
  }
}
</style>
